﻿    <form class="horizontal-form" autocomplete="off">
        <div class="m-form m-form--label-align-right"> 
            <div class="row align-items-center m--margin-bottom-10">
                <div class="col-xl-12">
                    <div class="form-group m-form__group align-items-center">
                        <div class="input-group">
                            <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input"  [placeholder]="l('SearchWithThreeDot')" type="text">
                            <span class="input-group-btn">
                                <button (click)="getRequirementItems()" class="btn btn-primary" type="submit"><i class="flaticon-search-1" [attr.aria-label]="l('Search')"></i></button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <div class="row margin-bottom-10">
        <div class="col-xl-6">
            <p>领用记录列表</p>
        </div>
        <div class="col-xl-6 text-right">
            <!--<button  class="btn btn-primary" (click)="showDialog(usingFormDto)"><i class="fa fa-edit"></i>已选标准件</button>-->
        </div>
    </div>
    <div class="row">
        <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
            <p-table #dataTable (onLazyLoad)="getRequirementItems($event)"
                [value]="primengTableHelper.records"
                rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                [resizableColumns]="primengTableHelper.resizableColumns">
                <ng-template pTemplate="header">
                    <tr>
                        <th style="width: 50px;text-align: center;">
                            序号
                        </th>
                        <th style="width: 100px;text-align: center;" pSortableColumn="taskNumber">
                            任务号
                            <p-sortIcon field="taskNumber"></p-sortIcon>
                        </th>
                        <th style="width: 100px;text-align: center;" pSortableColumn="quantityOfUsing">
                            领用数量
                            <p-sortIcon field="quantityOfUsing"></p-sortIcon>
                        </th>
                        <th style="width: 100px;text-align: center;"  pSortableColumn="features.timeOfStart">
                            申请时间
                            <p-sortIcon field="features.timeOfStart"></p-sortIcon>
                        </th>
                        <th style="width: 100px;text-align: center;"  pSortableColumn="features.startedUser">
                            领用人
                            <p-sortIcon field="features.startedUser"></p-sortIcon>
                        </th>
                        <th style="width: 80px;text-align: center;" pSortableColumn="state">
                            状态
                            <p-sortIcon field="state"></p-sortIcon>
                        </th>
                        <th style="width: 100px;text-align: center;" pSortableColumn="usableRange.unitOfUsing">
                            车间
                            <p-sortIcon field="usableRange.unitOfUsing"></p-sortIcon>
                        </th>
                        <th style="width: 100px;text-align: center;" pSortableColumn="usableRange.belongToModel">
                            型号
                            <p-sortIcon field="usableRange.belongToModel"></p-sortIcon>
                        </th>
                        <th style="width: 100px;text-align: center;" pSortableColumn="usableRange.batch">
                            发次
                            <p-sortIcon field="usableRange.batch"></p-sortIcon>
                        </th>
                        <th style="width: 100px;text-align: center;" pSortableColumn="usableRange.belongToComponent">
                            部段
                            <p-sortIcon field="usableRange.belongToComponent"></p-sortIcon>
                        </th>
                        <th style="width: 100px;text-align: center;" pSortableColumn="serialNumber">
                            编码
                            <p-sortIcon field="serialNumber"></p-sortIcon>
                        </th>
                        <th style="width: 100px;text-align: center;" pSortableColumn="features.displayName">
                            名称
                            <p-sortIcon field="features.displayName"></p-sortIcon>
                        </th>
                        <th style="width: 100px;text-align: center;" pSortableColumn="features.standardNumber">
                            标准
                            <p-sortIcon field="features.standardNumber"></p-sortIcon>
                        </th>
                        <th style="width: 100px;text-align: center;" pSortableColumn="features.specification">
                            规格
                            <p-sortIcon field="features.specification"></p-sortIcon>
                        </th>
                        <th style="width: 100px;text-align: center;" pSortableColumn="features.materials">
                            材料
                            <p-sortIcon field="features.materials"></p-sortIcon>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                    <tr>
                        <td style="width: 50px;text-align: center;">
                            <span class="ui-column-title">序号</span>
                            {{rowIndex + 1}}
                        </td>
                        <td style="width: 100px;text-align: center;">
                            <span class="ui-column-title">任务号</span>
                            {{record.taskNumber}}
                        </td>
                        <td style="width: 100px;text-align: center;">
                            <span class="ui-column-title">领用数量</span>
                            {{record.quantityOfUsing}}
                        </td>
                        <td style="width: 100px;text-align: center;">
                            <span class="ui-column-title">申请时间</span>
                            {{record.timeOfStart | date:'yyyy-MM-dd HH:mm:ss'}}
                        </td>
                        <td style="width: 100px;text-align: center;">
                            <span class="ui-column-title">领用人</span>
                            {{record.startedUser}}
                        </td>
                        <td style="width: 80px;text-align: center;">
                            <span class="ui-column-title">状态</span>
                            <span class="span_state background_yellow" *ngIf="record.state==1">
                                {{getState(record.state)}}
                            </span>
                            <span class="span_state background_orange" *ngIf="record.state==2">
                                {{getState(record.state)}}
                            </span>
                            <span class="span_state background_blue" *ngIf="record.state==3">
                                {{getState(record.state)}}
                            </span>
                            <span class="span_state background_green" *ngIf="record.state==4">
                                {{getState(record.state)}}
                            </span>
                            <span class="span_state background_gray" *ngIf="record.state==5">
                                {{getState(record.state)}}
                            </span>
                            <span class="span_state background_gray" *ngIf="record.state==6">
                                {{getState(record.state)}}
                            </span>
                        </td>
                        <td style="width: 100px;text-align: center;">
                            <span class="ui-column-title">车间</span>
                            {{record.usableRange.unitOfUsing}}
                        </td>
                        <td style="width: 100px;text-align: center;">
                            <span class="ui-column-title">型号</span>
                            {{record.usableRange.belongToModel}}
                        </td>
                        <td style="width: 100px;text-align: center;">
                            <span class="ui-column-title">发次</span>
                            {{record.usableRange.batch}}
                        </td>
                        <td style="width: 100px;text-align: center;">
                            <span class="ui-column-title">部段</span>
                            {{record.usableRange.belongToComponent}}
                        </td>
                        <td style="width: 100px;text-align: center;">
                            <span class="ui-column-title">编码</span>
                            {{record.serialNumber}}
                        </td>
                        <td style="width: 100px;text-align: center;">
                            <span class="ui-column-title">名称</span>
                            {{record.features.displayName}}
                        </td>
                        <td style="width: 100px;text-align: center;">
                            <span class="ui-column-title">标准</span>
                            {{record.features.standardNumber}}
                        </td>
                        <td style="width: 100px;text-align: center;">
                            <span class="ui-column-title">规格</span>
                            {{record.features.specification}}
                        </td>
                        <td style="width: 100px;text-align: center;">
                            <span class="ui-column-title">材料</span>
                            {{record.features.materials}}
                        </td>
                    </tr>
                </ng-template>
            </p-table>
            <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                {{'NoData' | localize}}
            </div>
            <div class="primeng-paging-container">
                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                    (onPageChange)="getRequirementItems($event)"
                    [totalRecords]="primengTableHelper.totalRecordsCount"
                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">

                </p-paginator>
                <span class="total-records-count">
                    {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                </span>
            </div>
        </div>
    </div>
    <requirementGetTabEditComponent #requirementGetTabEditComponent  (modalSave)="getRequirementItems()"></requirementGetTabEditComponent>